<template>
  <div class="articles" :class="{ mobile: isMobile }">
    <!-- 非首页列表头 -->
    <div class="article-list-header">
      <list-header />
    </div>
    <div v-if="articles.length && !fetching" class="article-list">
      <transition name="module" mode="out-in">
        <transition-group key="list" name="module" mode="out-in" tag="div">
          <article-item
            v-for="articleItem in articles"
            :key="articleItem.id"
            :article="articleItem"
          ></article-item>
        </transition-group>
      </transition>
    </div>
    <div v-else class="article-list">
      <ul class="article-list-skeleton" key="skeleton">
        <li v-for="item in 9" :key="item" class="item">
          <div class="thumb">
            <skeleton-base />
          </div>
          <div class="content">
            <div class="title">
              <skeleton-line />
            </div>
            <div class="description">
              <skeleton-paragraph :lines="4" />
            </div>
          </div>
        </li>
      </ul>
    </div>
    <!-- 加载更多 -->
    <div class="article-load">
      <button
        class="btn-loadmore"
        :disabled="fetching || !isCanLoadMore"
        @click="$emit('loadmore')"
      >
        <span v-if="!fetching && isCanLoadMore">加载更多</span>
        <span v-else-if="fetching && isCanLoadMore">加载更多</span>
        <span v-else-if="!isCanLoadMore"> 暂无更多 </span>
      </button>
    </div>
  </div>
</template>

<script>
import ListHeader from './list-header'
import articleItem from './item'
import empty from './empty'
import SkeletonLine from '@/components/skeleton/line'
import SkeletonBase from '@/components/skeleton/base'
import SkeletonParagraph from '@/components/skeleton/paragraph'
export default {
  name: 'article-list',
  components: {
    ListHeader,
    articleItem,
    empty,
    SkeletonLine,
    SkeletonBase,
    SkeletonParagraph,
  },
  props: {
    articles: {
      type: Array,
      default: () => [],
    },
    fetching: {
      type: Boolean,
      required: true,
    },
    pagination: {
      type: Object,
    },
  },
  computed: {
    isMobile() {
      return this.$store.state.global.isMobile
    },
    isCanLoadMore() {
      const { page, total_page } = this.pagination
      const hasArticles = this.pagination
      return hasArticles ? page < total_page : false
    },
  },
}
</script>

<style lang="scss" scoped>
.articles {
  padding: 8px 15px;
  background-color: #fff;
  border-radius: 6px;
  overflow: hidden;
  .article-list-header {
    padding-bottom: 15px;
    border-bottom: 1px solid #e9eaed;
  }
  .article-list-skeleton {
    padding: 0;
    margin: 0;
    list-style: none;
    overflow: hidden;
    .item {
      display: flex;
      height: 10rem;
      padding: $sm-gap;
      margin-bottom: $lg-gap;
      &:last-child {
        margin-bottom: 0;
      }
      .thumb {
        height: 100%;
        width: 15rem;
      }
      .content {
        margin-left: $lg-gap;
        flex-grow: 1;
        .title {
          height: 1.4em;
          width: 36%;
        }
        .description {
          margin-top: $sm-gap;
        }
      }
    }
  }
  .article-load {
    margin-top: 20px;
    text-align: center;
    outline: none;
  }
}
</style>
